<template>
    <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
    >
        <el-form-item label="邮箱" prop="email">
            <el-input v-model.trim="ruleForm.email"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="emailCode">
            <el-input v-model.trim="ruleForm.emailCode">
                <el-button class="code"  slot="append" type="info" round @click="getEmailCode">获取验证码</el-button>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        var checkEmailCode = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入验证码"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                email: "",
                emailCode: "",
            },
            rules: {
                email: [
                    {
                        required: true,
                        pattern: /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/,
                        message: "请填写你的邮箱",
                        trigger: "blur",
                    },
                ],
                emailCode: [
                    {validator: checkEmailCode, required: true, trigger: "blur"},
                ],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios.post("/register", this.ruleForm.email, {
                            headers: {
                                "Content-Type": "application/json",
                            },
                        })
                        .then((resp) => {
                            const str = resp.data;
                            if (200 === parseInt(str.status)) {
                                localStorage.setItem("userinfo", JSON.stringify(str.data));
                                this.$alert("修改成功", {
                                    confirmButtonText: "确定",
                                    callback: (action) => {
                                        // this.$message({
                                        //   type: 'info',
                                        //   message: `action: ${ action }`
                                        // });
                                    },
                                });
                            } else {
                                alert("修改失败");
                                return false;
                            }
                        });
                }
            });
        },
        getEmailCode() {
            const emailNumber = this.ruleForm.email;
            var reg = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$");
            let res = reg.test(emailNumber);
            if (res) {
                this.$axios.get("getemail/" + emailNumber).then((resp) => {
                    console.log(resp);
                });
            } else {
                this.$message({
                    message: "请先输入正确的邮箱",
                    type: "error",
                });
            }
        },
    },
};
</script>

<style scoped>
.el-form{
    width: 500px;
}
</style>
